<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

  <head>
    <meta charset="UTF-8">
    <title>bind绑定数组语法</title>
  </head>
  <style>
    .fontSize {
      font-size: 50px;
    }

    .h1Color {
      color: blue;
    }

    .h1Border {
      border: 1px solid #ccc;
    }
  </style>

  <body>
    <div id="app">
      <!-- 
        class绑定：数组方式:要绑定的样式个数不确定，名字也不确定
       -->
      <h1 class="display" v-bind:class="classArr">{{message}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          message: "你好，世界",
          classArr: ['fontSize', 'h1Color', 'h1Border']
        },
      })
    </script>
  </body>

</html>